{% extends './management_base.html' %}

{% block title %}后台管理{% end %}

{% block body %}
<div class="container dimmer">
  <div class="dimmer-content">
    <div class="loader"></div>
    <div class="total_info">
      <div class="page-header">
        <h1 class="page-title">
          历史统计
        </h1>
      </div>
      <div class="row row-cards">
        <div class="col-lg-6">
          <div class="row">
            <div class="col-sm-6">
              <div class="card">
                <div class="card-body text-center">
                  <div class="h5">网站访问量</div>
                  <div class="display-4 font-weight-bold mb-4" id="website_visit_count">0</div>
                </div>
              </div>
            </div>
            
            <div class="col-sm-6">
              <div class="card">
                <div class="card-body text-center">
                  <div class="h5">博文阅读量</div>
                  <div class="display-4 font-weight-bold mb-4" id="blog_visit_count">0</div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="col-lg-6">
          <div class="row">
            <div class="col-sm-6">
              <div class="card">
                <div class="card-body text-center">
                  <div class="h5">博文评论量</div>
                  <div class="display-4 font-weight-bold mb-4" id="blog_comment_count">0</div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="col-sm-6 col-lg-3">
          <div class="card p-3">
            <div class="d-flex align-items-center">
              <span class="stamp stamp-md bg-blue mr-3">
                <i class="fe fe-book"></i>
              </span>
              <div>
                <h4 class="m-0"><small>累计博文</small> <span id="blog_count">0</span> <small>篇</small></h4>
              </div>
            </div>
          </div>
        </div>
        <div class="col-sm-6 col-lg-3">
          <div class="card p-3">
            <div class="d-flex align-items-center">
              <span class="stamp stamp-md bg-green mr-3">
                <i class="fe fe-grid"></i>
              </span>
              <div>
                <h4 class="m-0"><small>累计分类</small> <span id="category_count">0</span> <small>个</small></h4>
              </div>
            </div>
          </div>
        </div>
        <div class="col-sm-6 col-lg-3">
          <div class="card p-3">
            <div class="d-flex align-items-center">
              <span class="stamp stamp-md bg-red mr-3">
                <i class="fe fe-tag"></i>
              </span>
              <div>
                <h4 class="m-0"><small>累计标签</small> <span id="tag_count">0</span> <small>个</small></h4>
              </div>
            </div>
          </div>
        </div>
        <div class="col-sm-6 col-lg-3">
          <div class="card p-3">
            <div class="d-flex align-items-center">
              <span class="stamp stamp-md bg-yellow mr-3">
                <i class="fe fe-feather"></i>
              </span>
              <div>
                <h4 class="m-0"><small>累计修改博文</small> <span id="update_blog_count">0</span> <small>次</small></h4>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <hr>
    <div class="over_7days_info">
      <div class="page-header">
        <h1 class="page-title">
          过去7日统计
        </h1>
      </div>
      <div class="row row-cards">
        <div class="col-lg-12">
          <div class="row">
            <div class="col-sm-6">
              <h5>网站访问统计</h5>
              <div id="chart-area-spline-sracked" style="height: 20rem"></div>
            </div>
            <div class="col-sm-6">
              <h5>博文阅读统计</h5>
              <div id="chart-bar" style="height: 20rem"></div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <hr>
    <div class="today_info">
      <div class="page-header">
        <h1 class="page-title">
          今日统计 <span id="date"></span>
        </h1>
      </div>
      <div class="row row-cards">
        <div class="col-lg-6">
          <div class="row">
            <div class="col-sm-6">
              <div class="card">
                <div class="card-body text-center">
                  <div class="h5">网站访问量</div>
                  <div class="display-4 font-weight-bold mb-4" id="website_visit_count">0</div>
                </div>
              </div>
            </div>
            
            <div class="col-sm-6">
              <div class="card">
                <div class="card-body text-center">
                  <div class="h5">博文阅读量</div>
                  <div class="display-4 font-weight-bold mb-4" id="blog_visit_count">0</div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="col-lg-6">
          <div class="row">
            <div class="col-sm-6">
              <div class="card">
                <div class="card-body text-center">
                  <div class="h5">博文评论量</div>
                  <div class="display-4 font-weight-bold mb-4" id="blog_comment_count">0</div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="col-sm-6 col-lg-3">
          <div class="card p-3">
            <div class="d-flex align-items-center">
              <span class="stamp stamp-md bg-blue mr-3">
                <i class="fe fe-book"></i>
              </span>
              <div>
                <h4 class="m-0"><small>新增博文</small> <span id="new_blog_count">0</span> <small>篇</small></h4>
              </div>
            </div>
          </div>
        </div>
        <div class="col-sm-6 col-lg-3">
          <div class="card p-3">
            <div class="d-flex align-items-center">
              <span class="stamp stamp-md bg-green mr-3">
                <i class="fe fe-grid"></i>
              </span>
              <div>
                <h4 class="m-0"><small>新增分类</small> <span id="new_category_count">0</span> <small>个</small></h4>
              </div>
            </div>
          </div>
        </div>
        <div class="col-sm-6 col-lg-3">
          <div class="card p-3">
            <div class="d-flex align-items-center">
              <span class="stamp stamp-md bg-red mr-3">
                <i class="fe fe-tag"></i>
              </span>
              <div>
                <h4 class="m-0"><small>新增标签</small> <span id="new_tag_count">0</span> <small>个</small></h4>
              </div>
            </div>
          </div>
        </div>
        <div class="col-sm-6 col-lg-3">
          <div class="card p-3">
            <div class="d-flex align-items-center">
              <span class="stamp stamp-md bg-yellow mr-3">
                <i class="fe fe-feather"></i>
              </span>
              <div>
                <h4 class="m-0"><small>修改博文</small> <span id="update_blog_count">0</span> <small>次</small></h4>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="yesterday_info">
      <div class="page-header">
        <h1 class="page-title">
          昨日统计 <span id="date"></span>
        </h1>
      </div>
      <div class="row row-cards">
        <div class="col-lg-6">
          <div class="row">
            <div class="col-sm-6">
              <div class="card">
                <div class="card-body text-center">
                  <div class="h5">网站访问量</div>
                  <div class="display-4 font-weight-bold mb-4" id="website_visit_count">0</div>
                </div>
              </div>
            </div>
            
            <div class="col-sm-6">
              <div class="card">
                <div class="card-body text-center">
                  <div class="h5">博文阅读量</div>
                  <div class="display-4 font-weight-bold mb-4" id="blog_visit_count">0</div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="col-lg-6">
          <div class="row">
            <div class="col-sm-6">
              <div class="card">
                <div class="card-body text-center">
                  <div class="h5">博文评论量</div>
                  <div class="display-4 font-weight-bold mb-4" id="blog_comment_count">0</div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="col-sm-6 col-lg-3">
          <div class="card p-3">
            <div class="d-flex align-items-center">
              <span class="stamp stamp-md bg-blue mr-3">
                <i class="fe fe-book"></i>
              </span>
              <div>
                <h4 class="m-0"><small>新增博文</small> <span id="new_blog_count">0</span> <small>篇</small></h4>
              </div>
            </div>
          </div>
        </div>
        <div class="col-sm-6 col-lg-3">
          <div class="card p-3">
            <div class="d-flex align-items-center">
              <span class="stamp stamp-md bg-green mr-3">
                <i class="fe fe-grid"></i>
              </span>
              <div>
                <h4 class="m-0"><small>新增分类</small> <span id="new_category_count">0</span> <small>个</small></h4>
              </div>
            </div>
          </div>
        </div>
        <div class="col-sm-6 col-lg-3">
          <div class="card p-3">
            <div class="d-flex align-items-center">
              <span class="stamp stamp-md bg-red mr-3">
                <i class="fe fe-tag"></i>
              </span>
              <div>
                <h4 class="m-0"><small>新增标签</small> <span id="new_tag_count">0</span> <small>个</small></h4>
              </div>
            </div>
          </div>
        </div>
        <div class="col-sm-6 col-lg-3">
          <div class="card p-3">
            <div class="d-flex align-items-center">
              <span class="stamp stamp-md bg-yellow mr-3">
                <i class="fe fe-feather"></i>
              </span>
              <div>
                <h4 class="m-0"><small>修改博文</small> <span id="update_blog_count">0</span> <small>次</small></h4>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <hr>
    <div class="this_month_info">
      <div class="page-header">
        <h1 class="page-title">
          本月统计 <span id="date"></span>
        </h1>
      </div>
      <div class="row row-cards">
        <div class="col-lg-6">
          <div class="row">
            <div class="col-sm-6">
              <div class="card">
                <div class="card-body text-center">
                  <div class="h5">网站访问量</div>
                  <div class="display-4 font-weight-bold mb-4" id="website_visit_count">0</div>
                </div>
              </div>
            </div>
            
            <div class="col-sm-6">
              <div class="card">
                <div class="card-body text-center">
                  <div class="h5">博文阅读量</div>
                  <div class="display-4 font-weight-bold mb-4" id="blog_visit_count">0</div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="col-lg-6">
          <div class="row">
            <div class="col-sm-6">
              <div class="card">
                <div class="card-body text-center">
                  <div class="h5">博文评论量</div>
                  <div class="display-4 font-weight-bold mb-4" id="blog_comment_count">0</div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="col-sm-6 col-lg-3">
          <div class="card p-3">
            <div class="d-flex align-items-center">
              <span class="stamp stamp-md bg-blue mr-3">
                <i class="fe fe-book"></i>
              </span>
              <div>
                <h4 class="m-0"><small>新增博文</small> <span id="new_blog_count">0</span> <small>篇</small></h4>
              </div>
            </div>
          </div>
        </div>
        <div class="col-sm-6 col-lg-3">
          <div class="card p-3">
            <div class="d-flex align-items-center">
              <span class="stamp stamp-md bg-green mr-3">
                <i class="fe fe-grid"></i>
              </span>
              <div>
                <h4 class="m-0"><small>新增分类</small> <span id="new_category_count">0</span> <small>个</small></h4>
              </div>
            </div>
          </div>
        </div>
        <div class="col-sm-6 col-lg-3">
          <div class="card p-3">
            <div class="d-flex align-items-center">
              <span class="stamp stamp-md bg-red mr-3">
                <i class="fe fe-tag"></i>
              </span>
              <div>
                <h4 class="m-0"><small>新增标签</small> <span id="new_tag_count">0</span> <small>个</small></h4>
              </div>
            </div>
          </div>
        </div>
        <div class="col-sm-6 col-lg-3">
          <div class="card p-3">
            <div class="d-flex align-items-center">
              <span class="stamp stamp-md bg-yellow mr-3">
                <i class="fe fe-feather"></i>
              </span>
              <div>
                <h4 class="m-0"><small>修改博文</small> <span id="update_blog_count">0</span> <small>次</small></h4>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="last_month_info">
      <div class="page-header">
        <h1 class="page-title">
          上月统计 <span id="date"></span>
        </h1>
      </div>
      <div class="row row-cards">
        <div class="col-lg-6">
          <div class="row">
            <div class="col-sm-6">
              <div class="card">
                <div class="card-body text-center">
                  <div class="h5">网站访问量</div>
                  <div class="display-4 font-weight-bold mb-4" id="website_visit_count">0</div>
                </div>
              </div>
            </div>
            
            <div class="col-sm-6">
              <div class="card">
                <div class="card-body text-center">
                  <div class="h5">博文阅读量</div>
                  <div class="display-4 font-weight-bold mb-4" id="blog_visit_count">0</div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="col-lg-6">
          <div class="row">
            <div class="col-sm-6">
              <div class="card">
                <div class="card-body text-center">
                  <div class="h5">博文评论量</div>
                  <div class="display-4 font-weight-bold mb-4" id="blog_comment_count">0</div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="col-sm-6 col-lg-3">
          <div class="card p-3">
            <div class="d-flex align-items-center">
              <span class="stamp stamp-md bg-blue mr-3">
                <i class="fe fe-book"></i>
              </span>
              <div>
                <h4 class="m-0"><small>新增博文</small> <span id="new_blog_count">0</span> <small>篇</small></h4>
              </div>
            </div>
          </div>
        </div>
        <div class="col-sm-6 col-lg-3">
          <div class="card p-3">
            <div class="d-flex align-items-center">
              <span class="stamp stamp-md bg-green mr-3">
                <i class="fe fe-grid"></i>
              </span>
              <div>
                <h4 class="m-0"><small>新增分类</small> <span id="new_category_count">0</span> <small>个</small></h4>
              </div>
            </div>
          </div>
        </div>
        <div class="col-sm-6 col-lg-3">
          <div class="card p-3">
            <div class="d-flex align-items-center">
              <span class="stamp stamp-md bg-red mr-3">
                <i class="fe fe-tag"></i>
              </span>
              <div>
                <h4 class="m-0"><small>新增标签</small> <span id="new_tag_count">0</span> <small>个</small></h4>
              </div>
            </div>
          </div>
        </div>
        <div class="col-sm-6 col-lg-3">
          <div class="card p-3">
            <div class="d-flex align-items-center">
              <span class="stamp stamp-md bg-yellow mr-3">
                <i class="fe fe-feather"></i>
              </span>
              <div>
                <h4 class="m-0"><small>修改博文</small> <span id="update_blog_count">0</span> <small>次</small></h4>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
<script>
  require(['jquery', 'c3'], function ($, c3) {
    console.log("初始化数据")
    getData(c3)

  })

  function getData(c3) {
    $(".dimmer").addClass("active")
    $.ajax("/api/index_data", {
      method: "GET",
    }).done(function (data) {
      if (data["status"] == 1) {
        fill_info(data['data'])
        over7DaysData(c3, data['data']["over_7_days_data"])
      } else {
        showAlert(0, data["msg"])
        return false
      }
    }).fail(function (xhr, error) {

    }).always(() => {
      $(".dimmer").removeClass("active")
    })
  }

  function fill_info(data){
    // 累计数据
    let total_data = data["total_data"]
    $(".total_info #website_visit_count")[0].innerText = total_data["website_visit_count"]
    $(".total_info #blog_visit_count")[0].innerText = total_data["blog_visit_count"]
    $(".total_info #blog_comment_count")[0].innerText = total_data["blog_comment_count"]
    $(".total_info #blog_count")[0].innerText = total_data["blog_count"]
    $(".total_info #category_count")[0].innerText = total_data["category_count"]
    $(".total_info #tag_count")[0].innerText = total_data["tag_count"]
    $(".total_info #update_blog_count")[0].innerText = total_data["update_blog_count"]
    // 今日数据
    let today_data = data["today_data"]
    $(".today_info #date")[0].innerText = today_data["date"]
    $(".today_info #website_visit_count")[0].innerText = today_data["website_visit_count"]
    $(".today_info #blog_visit_count")[0].innerText = today_data["blog_visit_count"]
    $(".today_info #blog_comment_count")[0].innerText = today_data["blog_comment_count"]
    $(".today_info #new_blog_count")[0].innerText = today_data["new_blog_count"]
    $(".today_info #new_category_count")[0].innerText = today_data["new_category_count"]
    $(".today_info #new_tag_count")[0].innerText = today_data["new_tag_count"]
    $(".today_info #update_blog_count")[0].innerText = today_data["update_blog_count"]
    // 昨日数据
    let yesterday_data = data["yesterday_data"]
    $(".yesterday_info #date")[0].innerText = yesterday_data["date"]
    $(".yesterday_info #website_visit_count")[0].innerText = yesterday_data["website_visit_count"]
    $(".yesterday_info #blog_visit_count")[0].innerText = yesterday_data["blog_visit_count"]
    $(".yesterday_info #blog_comment_count")[0].innerText = yesterday_data["blog_comment_count"]
    $(".yesterday_info #new_blog_count")[0].innerText = yesterday_data["new_blog_count"]
    $(".yesterday_info #new_category_count")[0].innerText = yesterday_data["new_category_count"]
    $(".yesterday_info #new_tag_count")[0].innerText = yesterday_data["new_tag_count"]
    $(".yesterday_info #update_blog_count")[0].innerText = yesterday_data["update_blog_count"]
    // 本月数据
    let this_month_data = data["this_month_data"]
    $(".this_month_info #date")[0].innerText = this_month_data["date"]
    $(".this_month_info #website_visit_count")[0].innerText = this_month_data["website_visit_count"]
    $(".this_month_info #blog_visit_count")[0].innerText = this_month_data["blog_visit_count"]
    $(".this_month_info #blog_comment_count")[0].innerText = this_month_data["blog_comment_count"]
    $(".this_month_info #new_blog_count")[0].innerText = this_month_data["new_blog_count"]
    $(".this_month_info #new_category_count")[0].innerText = this_month_data["new_category_count"]
    $(".this_month_info #new_tag_count")[0].innerText = this_month_data["new_tag_count"]
    $(".this_month_info #update_blog_count")[0].innerText = this_month_data["update_blog_count"]
    // 上月数据
    let last_month_data = data["last_month_data"]
    $(".last_month_info #date")[0].innerText = last_month_data["date"]
    $(".last_month_info #website_visit_count")[0].innerText = last_month_data["website_visit_count"]
    $(".last_month_info #blog_visit_count")[0].innerText = last_month_data["blog_visit_count"]
    $(".last_month_info #blog_comment_count")[0].innerText = last_month_data["blog_comment_count"]
    $(".last_month_info #new_blog_count")[0].innerText = last_month_data["new_blog_count"]
    $(".last_month_info #new_category_count")[0].innerText = last_month_data["new_category_count"]
    $(".last_month_info #new_tag_count")[0].innerText = last_month_data["new_tag_count"]
    $(".last_month_info #update_blog_count")[0].innerText = last_month_data["update_blog_count"]

  }

  function over7DaysData(c3, data) {
    let dates = []    // 日期
    let website_visit_ips = ['data1']   // 网站浏览数据统计
    let blog_visit_data = ['data1']     // 博客浏览数据统计
    let comment_data = ['data2']        // 评论数据统计
    for (let index = 0; index < data["website_visit_data"].length; index++) {
      // const element = array[index];
      dates.push(data["website_visit_data"][index]["date"])
      website_visit_ips.push(data["website_visit_data"][index]["ips"])
      blog_visit_data.push(data["blog_visit_data"][index]["count"])
      comment_data.push(data["comment_data"][index]["count"])    
    }

    // 网站访问统计
    var chart1 = c3.generate({
      bindto: '#chart-area-spline-sracked', // id of chart wrapper
      data: {
        columns: [
          // each columns data
          // ['data1', 11, 8, 15, 18, 19, 17, 44, 33],
          website_visit_ips
        ],
        labels: true,
        type: 'area-spline', // default type of chart
        groups: [
          ['data1']
        ],
        colors: {
          'data1': tabler.colors["blue"],
        },
        names: {
          // name of each serie
          'data1': '网站访问量',
        }
      },
      axis: {
        x: {
          type: 'category',
          // name of each category
          // categories: ['5月17日', '5月17日', '5月17日', '5月17日', '5月17日', '5月17日', '5月17日', '5月17日']
          categories: dates
        },
      },
      legend: {
        show: false, //hide legend
      },
      padding: {
        bottom: 0,
        top: 0
      },
    });

    // 博文阅读统计
    var chart2 = c3.generate({
      bindto: '#chart-bar', // id of chart wrapper
      data: {
        columns: [
          // each columns data
          // ['data1', 11, 8, 15, 18, 19, 17, 22, 44],
          // ['data2', 7, 7, 5, 7, 9, 12, 22, 12]
          blog_visit_data, comment_data
        ],
        labels: true,
        type: 'bar', // default type of chart
        colors: {
          'data1': tabler.colors["blue"],
          'data2': tabler.colors["pink"]
        },
        names: {
          // name of each serie
          'data1': '阅读次数',
          'data2': '评论次数'
        }
      },
      axis: {
        x: {
          type: 'category',
          // name of each category
          // categories: ['5月17日', '5月17日', '5月17日', '5月17日', '5月17日', '5月17日', '5月17日', '5月17日']
          categories: dates
        },
      },
      bar: {
        width: 20
      },
      legend: {
        show: false, //hide legend
      },
      padding: {
        bottom: 0,
        top: 0
      },
    });

  }
</script>

{% end %}